// 对Vue的全局指令，进行封装
// 封装中间件的函数插件

const directiveObj = {
  install (Vue) {
    // 创建自定义指令
    Vue.directive('fofo', {
      inserted (el) {
        // 指令所在van-search组件; 组件根标签是div,input在内部;
        // 以上都是原生标签对象
        /**
         * 搜索页面 el 是div,文章评论 el是textarea,以后el还可能是input
         * 知识点: 原生DOM.nodeName 拿到标签名字(注意:大写的字符串)
         */
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el本省不是输入框, 尝试往里获取一下
          setTimeout(() => {
            const theInput = el.querySelector('input')
            const theTextArea = el.querySelector('textarea')
            if (theInput) theInput.focus()
            if (theTextArea) theTextArea.focus()
          })
        }
      },
      // 指令所在标签,被更新时触发
      update (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el本省不是输入框, 尝试往里获取一下
          setTimeout(() => {
            const theInput = el.querySelector('input')
            const theTextArea = el.querySelector('textarea')
            if (theInput) theInput.focus()
            if (theTextArea) theTextArea.focus()
          })
        }
      }
    })
  }
}

export default directiveObj
